<template>
  <div class="v-editor-model-tree-select g-jc-sb g-pd-l-8">
    <div class="g-one-line content">
      <template v-if="valueData">
        <img
          v-if="valueData.icon"
          class="g-m-r-4"
          style="height: 14px"
          :src="valueData.icon"
        />
      </template>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="border-left: 1px solid #ddd; line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <div>
        <div>
          <img
            src="statics/icons/app/ImageShape.svg"
            class="g-pointer"
            @click="handleClick"
          />
        </div>
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/app/iconmore.png"
          class="g-pointer"
          @click="handleFileClick"
        />
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/app/iconreduce.png"
          class="g-pointer"
          :class="{ _disable: !valueData }"
          @click="handleRemove"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { actionManager } from "@/action/ActionManager";
import { OpenImageLibraryAction } from "@/modules/model/actions/project/OpenImageLibraryAction";
import { PropertyRow, ModelValue } from "../../types";
import { Ref, computed, toRaw, inject } from "vue";
import { localFile } from "@/localFile/LocalFile";
import { propertyUtil } from "@/modules/model/comps/station/sider/attribute/PropertyUtil";
import { ActionKey } from "@/action/ActionKey";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const valueData = computed(() => {
  const value = props.row.value;
  return (props.row.isMultiplicity ? (value as ModelValue[])[0] : value) as ModelValue;
});

// function fullImage(imageSrc:string) {
//   return `${MODEL_SERVER_URL}/public/files/${app.activeProject!.id}/${imageSrc}`;
// }
/**
 * 模型单选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

function handleRemove() {
  if (valueData.value) {
    propertyUtil.deletePropertyAndRefresh(props.row, valueData.value.id);
  }
}

const handleClick = () => {
  const action = actionManager.getAction(ActionKey.openImageLibrary) as OpenImageLibraryAction;
  action?.run(app.activeProject?.id, toRaw(props.row));
};

const handleFileClick = async () => {
  const result = await localFile.chooseFile({
    filters: [
      {
        name: "图片",
        extensions: ["jpg", "jpeg", "png", "gif", "svg"]
      }
    ],
    loadBuffer: true
  });

  let filePath = result.files[0]?.path;
  if (!filePath) return;
  await propertyUtil.updatePropertyAndFresh(props.row, filePath);
};
</script>
<style lang="scss" scoped>
.v-editor-model-tree-select {
  height: 100%;
  .content {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  ._disable {
    cursor: not-allowed;
    color: #c1c5cb;
    filter: grayscale(100);
  }
}
</style>
